<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        li {
          list-style: none;
          background-color: red;
          width: 300px;
          margin-top: 20px;
          height: 30px;
          line-height: 30px;
        }
      </style>
</head>
<body>
    <ul>
        <li>迪丽热巴</li>
        <li>初音未来</li>
        <li>古力娜扎</li>
        <li>阿里巴巴</li>
      </ul>
    <script>
        //利用事件冒泡，把子元素的事件委托给父级。在通过判断事件源做相应的操作
        var ul = document.querySelector('ul')
        ul.onclick = function(e){
            e = e || window.event
            // console.log(e)
            //获取事件源（事件流里处于目标阶段的元素）
            var target = e.target || e.srcElement
            // console.log(target)
            if (target.tagName === 'LI') {
                console.log(target.innerHTML)
            }
        }
    </script>
</body>
</html>